<template>
  <view class="relative">
    <view class="relative-index">
      <view class="rela-title">{{ groupName }}</view>
      <view class="selected-box">
        <view>
          <view
            v-for="item in carModel.optional_years"
            :key="item.value"
            :class="{ active: item.value === checkedYear }"
            @tap="() => selectYear(item)"
          >
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
      <view>
        <view
          class="car-info"
          v-for="item in carModel.list"
          :key="item.model_id"
          @tap="() => selectModel(item)"
        >
          <view class="car-info-title">{{ item.model_name }}</view>
          <view class="car-info-price">{{ item.model_price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import Taro, { Events, getCurrentInstance, navigateBack } from '@tarojs/taro'
import { getCarModel } from '@requests/carLib'
import { getParam, navigateTo } from '@utils/index'

export default {
  name: 'ReleaseCars',
  data() {
    return {
      carModel: {},
      groupId: '',
      groupName: '',
      event: '',
      checkedYear: null
    }
  },
  created() {
    this.groupId = getParam('car_series_id')
    this.groupName = getParam('car_series_name')
    this.event = getParam('event')
    this.getModel()
  },
  computed: {},
  methods: {
    selectYear(year) {
      this.checkedYear = year.value
    },
    selectModel(model) {
      const modelParams = {
        car_model_id: model.model_id,
        car_model_name: model.model_name,
        car_guide_price: parseInt(model.model_price)
      }
      const params = getCurrentInstance().router.params
      navigateBack({
        delta: 2,
        success: res => {
          Taro.eventCenter.trigger(this.event, {
            ...modelParams,
            ...params
          })
        }
      })
    },
    getModel() {
      getCarModel(this.groupId, this.checkedYear).then(res => {
        this.carModel = res.result
      })
    }
  },
  watch: {
    checkedYear() {
      this.getModel()
    }
  }
}
</script>

<style lang="scss">
.rela-title {
  padding: 0.5rem 0.9rem;
  font-size: 1.02rem;
  background: #fff;
  margin-top: 0.9rem;
}
.car-info {
  background: #fff;
  padding: 0.8rem;
  border-top: 2rpx solid rgba(238, 238, 238, 0.5);
}
.car-info .car-info-title {
  font-size: 0.965rem;
}
.car-info .car-info-price {
  font-size: 0.865rem;
  color: #f00;
}
.selected-box {
  background: #ffffff;
  padding: 0 0.9rem 0.9rem;
  font-size: 0.96rem;
  & > text {
    line-height: 0.48rem;
    color: #000000;
    font-size: 0.96rem;
  }
  view {
    display: flex;
    flex-wrap: wrap;
    view {
      display: inline-block;
      font-size: 0.96rem;
      width: 21%;
      text-align: center;
      padding: 8px 0;
      border: 1px solid #006cff;
      border-radius: 0.3rem;
      color: #006cff;
      margin: 20px 20px 0 0;
      position: relative;
    }
    .active {
      border: 1px solid #006cff;
      background: #006cff;
      color: #fff;
    }
  }
}
.relative {
  padding: 0 0.9rem;
  background: #f9f9f9;
}
.relative-box {
  margin-top: 0.9rem;
}
.relative {
  position: relative;
}
.sub {
  position: fixed;
  left: 120rpx;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  overflow: auto;
  background: #f9f9f9;
}
.sub-t {
  width: 0;
  margin: 0 auto;
  overflow: hidden;
}
.cell-title {
  margin-left: 30rpx;
}
</style>
